<template>
  <div>
      <el-table :data="articlelist">
        <el-table-column prop="title" label="标题" width="140">
        </el-table-column>
        <el-table-column prop="body" label="内容" width="220">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="editList(scope.row._id)" type="text" size="small">编辑</el-button>
            <el-button @click="removeList(scope.row._id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="address" label="地址">
        </el-table-column> -->
      </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        articlelist:[]
      }
    },
    created() {
      this.feach()
        //console.log(res.data);
    },
    methods: {
      feach(){
        this.$http.get('/articles').then(res=>{
          return this.articlelist=res.data
        })
      },
      removeList(id){
        this.$http.delete(`/articles/${id}`).then(res=>{
          console.log(res.status);
          this.$message({
            message:'文章删除成功',
            type:'sucess'
          })
          //this.$router.push('/articles/index')
          //再次请求数据
          this.feach()
        })
      },
      editList(id){
        console.log(id);
        this.$router.push(`/articles/${id}/edit`)
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>